<template>
  <div>
    <h1>Parent</h1>
    <Child
      class="helloword"
      :style="{fontStyle: 'italic' }"
      :name="name"
      :age="age"
      :sex="sex"
      :count="count"
      :getData1="getData1"
      :getData2="getData2"
      :getData3="getData3"
      @abc="abc"
    />    
  </div>
</template>

<script>
/* 
  $attrs和$listeners主要功能是在props和事件传递的时候，进行批量接收
  多层嵌套组件传递数据时，如果只是传递数据，而不做中间处理的话就可以用这个接收剩余的props，然后批量向深层次组件继续传递数据
    -$attrs：包含父作用域里除 class 和 style 除外的 props 属性集合。通过 this.$attrs 获取父作用域中所有符合条件的属性集合，然后还要继续传给子组件内部的其他组件，就可以通过 v-bind="$attrs"批量传递props
    - $listeners：包含父作用域里 .native 除外的监听事件集合。如果还要继续传给子组件内部的其他组件，就可以通过 v-on="$linteners"批量绑定自定义事件
*/
import Child from "./Child";
export default {
  name: "Parent",
  components: {
    Child,
  },

  data() {
    return {
      name: "老王",
      age: 18,
      sex: "男",
      count: 0,
    };
  },

  methods: {
    getData1() {
      console.log("getData1");
    },
    getData2() {
      console.log("getData2");
    },
    getData3() {
      console.log("getData3");
    },
    abc() {
      console.log("abc");
    },
  },

};
</script>

<style></style>
